/*
 * @Author: huangyingli
 * @Date: 2023-02-23 22:25:08
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-26 03:13:35
 * @Description:
 */
import { Checkbox, Tag } from 'antd';
import style from './ComponentCard.module.less';

export default function ComponentCard(props) {
  function onDragStart(ev) {
    ev.dataTransfer.setData('application/json', JSON.stringify(props));
    ev.dataTransfer.dropEffect = 'copy';
    console.log('开始拖拽');
  }
  function onChange(e) {
    console.log('checked', e.target.checked);
    props?.onSelect(e.target.checked);
  }
  return (
    <div
      className={style.componentCard}
      draggable='true'
      onDragStart={onDragStart}
    >
      {props.showStatus && (
        <div className={style.status}>
          <Checkbox onChange={onChange}></Checkbox>

          <Tag color={props.isOnLine ? 'cyan' : 'red'}>
            {props.isOnLine ? '已发布' : '未发布'}
          </Tag>
        </div>
      )}
      <span className={style.name}>{props.name}</span>
    </div>
  );
}
